<template>
  <div class="wrapper">
    <div class="rank">
      <div class="nodata" v-if="showTips">
        <div class="showtip">暂无数据！</div>
      </div>
      <ul
        v-if="!showTips"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="20"
      >
        <li v-for="(item, index) in rankList" :key="item.index">
          <span>{{index+1}}</span>
          <span>
            <img v-lazy="item.headImg" alt>
          </span>
          <span>
            <span>{{ item.fromOpenName}}</span>
            <span>{{item.create_time}}</span>
          </span>
          <span>{{item.cnt}}</span>
        </li>
        <li class="loading_warp" v-show="isShowLoadingIcon">
          <div class="msg_loading">
            <img src="http://assets.rurushishi.com/activies/zdfzh/icon_loading.png" alt>
          </div>
        </li>
        <li class="no_more_data" v-show="!isShowLoadingIcon">没有更多数据了</li>
      </ul>
    </div>
    <div class="return" @click="ret">
      <img
        class="saclebtn"
        src="http://assets.rurushishi.com/activies/zdfzh/voice_backindex.png"
        alt
      >
    </div>
    <music></music>
    <Bottom :baseText="baseText"></Bottom>
  </div>
</template>
<script>
import request from "@/utils/request";
import Cookies from "js-cookie";
import * as config from "./config";
// import wxsdk from "@/utils/wxsdk";
// import wx from "weixin-js-sdk";
import Bottom from "@/components/common/Bottom";
import utils from "@/utils/utils";
import music from "./components/music";
export default {
  components: {
    Bottom,
    music
  },
  data() {
    return {
      openid: Cookies.get("openid"),
      userInfo: {
        user: {
          nickname: "",
          headimgurl: ""
        }
      }, //用户信息
      // 接收到的传播信息
      receiveSpreadInfo: {
        channel: 0, //渠道
        fuid: "", //传播者的openid
        ouid: "" //销售或渠道的openid
      },
      loading: true, //infinite-scroll-disabled	若为真，则无限滚动不会被触发
      showTips: false,
      rankList: [],
      pageIndex: 1,
      baseText: config.BASE_TEXT,
      isShowLoadingIcon: true
    };
  },

  methods: {
    loadMore() {
      this.loadData();
    },
    loadData() {
      const that = this;
      that.loading = true;
      this.voiceRankPage(that.pageIndex).then(function(response) {
        if (response.data.totalCount <= 0) {
          that.showTips = true;
          that.loading = true;
        } else {
          that.pageIndex++;
          that.showTips = false;
          that.loading = false;
          response.data.list.map(item => {
            item.create_time = utils
              .getFullTime(item.create_time)
              .substring(5, 19);
            return item;
          });
          that.rankList = that.rankList.concat(response.data.list);
          if (
            that.rankList.length >= response.data.totalCount ||
            that.pageIndex >= response.data.totalPage
          ) {
            //无更多数据
            that.loading = true;
            that.isShowLoadingIcon = false;
          }
        }
      });
    },
    // 点击返回首页
    ret() {
      // this.gotoUrl("index");
      this.pushUrl("index");
    },
    // 语音助力排行榜-分页
    voiceRankPage(pageNo) {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .get(
            `${that.global.API_ACT_URL}voiceRankPage?activityId=${
              config.activityId
            }&pageNo=${pageNo}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    },
    // 提交分享成功回调
    shareCallBack() {
      let that = this;
      request
        .post(
          `${that.global.API_ACT_URL}share?activityId=${
            config.activityId
          }&openId=${that.openid}`,
          {}
        )
        .then(function(data) {});
    },
    // 跳转本项目的其他链接
    gotoUrl(page) {
      // 带上本页面的传播信息
      let url =
        location.protocol +
        "//" +
        location.host +
        this.global.GLOBAL_BASE_PATH +
        "/";
      if (this.$route.fullPath.indexOf("?") > -1) {
        url += page + "?" + this.$route.fullPath.split("?")[1];
      } else {
        url += page;
      }
      location.href = url;
    },
    // 通过路由方式跳转本项目的其他链接
    pushUrl(page) {
      // 带上本页面的传播信息
      let url = "";
      let fullPathNoShare = this.$route.fullPath;
      fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
      fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
      if (fullPathNoShare.indexOf("?") > -1) {
        url = page + "?" + fullPathNoShare.split("?")[1];
      } else {
        url = page;
      }
      this.$router.push("/" + url);
    },
    /**
     * 初始化
     * 1、设置传播传播信息
     * 2、获取用户信息
     * 3、设置分享信息
     */
    init() {
      let that = this;
      // 设置传播信息
      if (this.$route.query.channel)
        this.receiveSpreadInfo.channel = this.$route.query.channel;
      if (this.$route.query.fuid)
        this.receiveSpreadInfo.fuid = this.$route.query.fuid;
      if (this.$route.query.ouid)
        this.receiveSpreadInfo.ouid = this.$route.query.ouid;
      if (this.$route.query.isshare) this.$route.query.isshare = true;
      config.getUserInfo().then(function(userInfo) {
        that.userInfo = userInfo;
        // 设置分享 标题 链接 回调
        let shareObj = {
          title: "",
          link: ""
        };
        if (
          that.userInfo &&
          that.userInfo.user &&
          that.userInfo.user.nickname
        ) {
          shareObj.title = `${
            that.userInfo.user.nickname
          }邀请你跟我一起读语音赢奖品，读出你的“国际范儿”`;
        }

        if (that.userInfo.salerOrAgent) {
          // 是销售或者渠道,更新ouid
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}&ouid=${that.openid}`;
        } else {
          shareObj.link = `${config.SHARE_LINK}?channel=${
            that.receiveSpreadInfo.channel
          }&fuid=${that.openid}${
            that.receiveSpreadInfo.ouid
              ? "&ouid=" + that.receiveSpreadInfo.ouid
              : ""
          }`;
        }
        config.initShare(shareObj);
        that.global.SHARE_CALLBACK_OK = function(type) {
          that.shareCallBack();
        };
      });
    }
  },
  mounted() {
    this.loadData();
  },
  created() {
    this.init();
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';
@import 'comm.styl';

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/zdfzh/rank_bg.jpg') repeat center center;
  background-size: 100% 100%;
}

.rank {
  margin: 0 auto;
  margin-top: 2.5rem;
  width: 90%;
}

.nodata {
  height: 7rem;
}

.nodata .showtip {
  width: 100%;
  padding-top: 1rem;
  line-height: 0.5rem;
  color: #ffffff;
  text-align: center;
  font-size: 0.32rem;
  height: 0.5rem;
}

.rank>ul {
  width: 100%;
  height: 7rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rank>ul>li {
  display: flex;
  border-bottom: 1px solid #cacaca;
}

.rank>ul>li>span {
  height: 1.4rem;
  text-align: center;
  line-height: 1.4rem;
}

.rank>ul>li>span:nth-child(1) {
  width: 10%;
  color: #feca00;
}

.rank>ul>li>span:nth-child(2) {
  width: 20%;
}

.rank>ul>li>span:nth-child(3) {
  width: 50%;
  color: #fff;
  font-size: 0.32rem;
  dispaly: flex;
}

.rank>ul>li>span:nth-child(3)>span {
  line-height: 0.4rem;
  display: block;
  text-align: left;
}

.rank>ul>li>span:nth-child(3)>span:nth-child(1) {
  width: 100%;
  margin-top: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank>ul>li>span:nth-child(3)>span:nth-child(2) {
  font-size: 0.25rem;
}

.rank>ul>li>span:nth-child(4) {
  width: 20%;
  color: #ffffff;
  font-size: 0.36rem;
}

.rank>ul>li>span>img {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 3px solid #feca00;
}

.return {
  // position: absolute;
  // bottom: 1rem;
  margin-top: 1rem;
  width: 100%;
  text-align: center;
}

.return>img {
  width: 2rem;
}

.loading_warp {
  border-bottom: none !important;
}

.msg_loading {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.msg_loading img {
  width: 30px;
  height: 30px;
  animation: mymove;
  animation-duration: 0.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes mymove {
  from {
    transform: rotate(1deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.no_more_data {
  border-bottom: none !important;
  color: #ffffff;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding-top: 20px;
}
</style>